 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
	<title>Article Image edit</title>
 <%= stylesheet_link_tag 'cropper' %> 
 
	<script src="/javascripts/prototype.js" type="text/javascript"></script>	
 	<script src="/javascripts/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
	<script src="/javascripts/cropper.js" type="text/javascript"></script>

 
	<script type="text/javascript" charset="utf-8">
		
		/**
		 * A little manager that allows us to swap the image dynamically
		 *
		 */
		var CropImageManager = {
			/**
			 * Holds the current Cropper.Img object
			 * @var obj
			 */
			curCrop: null,
			
			/**
			 * Initialises the cropImageManager
			 *
			 * @access public
			 * @return void
			 */
			init: function() {
				this.attachCropper();
			},
			
			/**
			 * Handles the changing of the select to change the image, the option value
			 * is a pipe seperated list of imgSrc|width|height
			 * 
			 * @access public
			 * @param obj event
			 * @return void
			 */
			onChange: function( e ) {
				var vals = $F( Event.element( e ) ).split('|');
				this.setImage( vals[0], vals[1], vals[2] ); 
			},
			
			/**
			 * Sets the image within the element & attaches/resets the image cropper
			 *
			 * @access private
			 * @param string Source path of new image
			 * @param int Width of new image in pixels
			 * @param int Height of new image in pixels
			 * @return void
			 */
			setImage: function( imgSrc, w, h ) {
				$( 'testImage' ).src = imgSrc;
				$( 'testImage' ).width = w;
				$( 'testImage' ).height = h;
				this.attachCropper();
			},
			
			/** 
			 * Attaches/resets the image cropper
			 *
			 * @access private
			 * @return void
			 */
			attachCropper: function() {
				if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'testImage', { onEndCrop: onEndCrop } );
				else this.curCrop.reset();
			},
			
			/**
			 * Removes the cropper
			 *
			 * @access public
			 * @return void
			 */
			removeCropper: function() {
				if( this.curCrop != null ) {
					this.curCrop.remove();
				}
			},
			
			/**
			 * Resets the cropper, either re-setting or re-applying
			 *
			 * @access public
			 * @return void
			 */
			resetCropper: function() {
				this.attachCropper();
			}
		};
		
		
		// setup the callback function
		function onEndCrop( coords, dimensions ) {
			$( 'x1' ).value = coords.x1;
			$( 'y1' ).value = coords.y1;
			$( 'x2' ).value = coords.x2;
			$( 'y2' ).value = coords.y2;
			$( 'width' ).value = dimensions.width;
			$( 'height' ).value = dimensions.height;
		}
		
		// basic example
		Event.observe( 
			window, 
			'load', 
			function() { 
				CropImageManager.init();

			}
		); 
	</script>
	<link rel="stylesheet" type="text/css" href="debug.css" media="all" />
	<style type="text/css">
		label { 
			clear: left;
			margin-left: 50px;
			float: left;
			width: 5em;
		}
		
		#testWrap {
			margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
		}
	</style>
</head>
<body>
	<h2>Edit download image for article <%=Article.find(params[:article_id]).title%></h2>

	<div id="testWrap">

		<img src=<%=Imageurl.find(params[:id]).simgurl%> alt="test image" id="testImage" />
	</div>
	
	<%form_tag({:action => :crop_and_close,:article_id3 => params[:article_id]}) do%>
	
    <%= hidden_field_tag 'imgurl',"public/"+Imageurl.find(params[:id]).simgurl[26,Imageurl.find(params[:id]).simgurl.length - 26] %>	

    
		<%= hidden_field_tag 'x1' %>

		<%= hidden_field_tag 'y1' %>

		<%= hidden_field_tag 'x2' %>

		<%= hidden_field_tag 'y2' %>

		<%= hidden_field_tag 'width' %>

		<%= hidden_field_tag 'height' %>
		
		
	<br />
		 &nbsp; &nbsp; &nbsp; &nbsp;      Resize:  Width<%=text_field_tag 'widt'%>&nbsp; &nbsp; Height<%=text_field_tag 'heigt' %> <br/>	
		 &nbsp; &nbsp; &nbsp; &nbsp;      Rotate Angle:<%=text_field_tag 'rotang',0 %>  <br/>

	     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<%=submit_tag('save as')%>
	<%end%>
</body>
</html>